<script setup lang="ts">
import MList from "@/components/MList.vue"
import {
    NIcon, NTag, NPopconfirm,
    NButton, type DataTableColumns,
} from 'naive-ui';
import { type RowData } from 'naive-ui/es/data-table/src/interface';
import { ref, h, onMounted } from 'vue';

import { Edit, Delete } from "@vicons/carbon"

import { useFeature } from "~/common/mixins/";
let { DeleteOne } = useFeature()

import useTime from "~/utils/Time";
let { format } = useTime()

import EditDept from "./component/editDept.vue";

let editDeptRef = ref();
let listRef = ref()
let columns = ref<DataTableColumns<RowData>>([
    {
        type: 'selection'
    },
    {
        title: "部门名称",
        key: "fdName"
    }, {
        title: "排序",
        key: "fdOrder",
        align: 'center'
    }, {
        title: "状态",
        key: "fdStatus",
        align: 'center',
        render(rowData, _) {
            return h(NTag, { type: (rowData.fdStatus == 1 ? "success" : "error") }, "正常");
        }
    }, {
        title: "创建时间",
        key: "fdCreatedAt",
        render(rowData, _) {
            return format(rowData.fdCreatedAt)
        }
    }, {
        title: '操作',
        key: "action",
        render(rowData, _) {
            return [h(NButton, {
                circle: true, renderIcon() {
                    return h(NIcon, {}, {
                        default: () => h(Edit)
                    });
                }, type: "primary", style: "margin-right:10px;", onClick(_) {
                    onShow(rowData)
                },
            }, ""), renderDeleteIcon(rowData.fdId)]
        }
    }
]);

import { useMessage } from "naive-ui";
let message = useMessage();

const renderDeleteIcon = (id: any) => {
    return h(NPopconfirm, {
        onPositiveClick: () => {
            DeleteOne(deptStore, id).then(() => {
                message.success("删除成功");
                handleQuery()
            })
        },
        negativeText: '取消',
        positiveText: '删除'
    }, {
        trigger: () => h(NButton, {
            circle: true, renderIcon() {
                return h(NIcon, {}, {
                    default: () => h(Delete)
                });
            }, type: "error"
        }, ""),
        default: "确认要删除这行数据？"
    })
}


let root = "dept";

import { useDeptStore } from "@/store/orgnization/deptStore";
let deptStore = useDeptStore()

let selectDatas = ref<any[]>();

let handleQuery = () => {
    listRef.value?.handleQuery(deptStore, root);
}

onMounted(() => {
    handleQuery();
})

let emitData = (datas: []) => {
    selectDatas.value = datas;
}

function onShow(row: any) {
    editDeptRef.value?.openDialog(row, selectDatas.value);
}

let isExpendAll = ref(true);
</script>

<template>
    <div class="mc_1">
        <MList ref="listRef" :is-expend-all="isExpendAll" :is-pagination="false" @on-load="handleQuery"
            @emit-data="emitData" @on-show="onShow({})" :columns="columns">
            <template #extra_btn>
                <n-button type="tertiary" @click="isExpendAll = !isExpendAll">展开/折叠</n-button>
            </template>
        </MList>

        <EditDept ref="editDeptRef" @handle-query="handleQuery"></EditDept>
    </div>


</template>

<style scoped>
.toolbar {
    padding: 10px 0 10px 10px;

    .n-button:first-child {
        margin-right: 10px;
    }
}
</style>
